<template>
  <div class="container">
    <!-- 第一行 经营数据 -->
    <div class="row">
      <RowOne />
    </div>

    <!-- 第二行 订单统计 救援任务统计 用户概览 -->
    <div class="row">
      <RowTwo />
    </div>

    <!-- 第三行 注册用户分析-->
    <div class="row">
      <RowThree />
    </div>
  </div>
</template>

<script setup>
import RowOne from "@/components/dashboard/RowOne.vue";
import RowTwo from "@/components/dashboard/RowTwo.vue";
import RowThree from "@/components/dashboard/RowThree.vue";
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  box-sizing: border-box;
  background-color: #f7f7f7;
  padding: 20px;

  display: flex;
  flex-direction: column;
  gap: 20px;

  .row {
    background-color: palegoldenrod;
    border: 1px solid #333;
    box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.12);
    /*添加鼠标悬停效果 */
    &:hover {
      box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.24);
    }
  }
}
</style>
